


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layuiAdmin 网站用户 iframe 框</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>
<style>
  .layui-form-select{
    width:200px
  }
  .layui-select-title{
    width:200px
  }
  .layui-input{
    width: 200px;
  }
  
</style>
<body>

  <div class="layui-form" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin" style="padding: 20px 0 0 0;">
    <div class="layui-form-item">
      <label class="layui-form-label">用户ID</label>
      <div class="layui-input-inline">
        <input type="text" name="userId" lay-verify="required" placeholder="请输入用户ID" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">角色</label>
            <div class="layui-input-block" style="width: 220px;">
              <select name="roleId">
                <option value="1">超级管理员</option>
                <option value="2">普通用户</option>
              </select>
            </div>
    </div>
    <div class="layui-form-item" lay-filter="expireTime">
      <label class="layui-form-label">失效时间</label>
       <div class="layui-input-inline">
        <input type="text" name="expireTime" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
       </div>
      </div>
    
    
  </div>
  <script src="./JS/utils/request.js"></script>
  <script src="./JS/utils/auth.js"></script>
  <script src="../layui/layui.all.js"></script>  
  <script>
 layui.laydate.render({
  elem: '#date',
  type:'datetime',
  format: 'yyyy-MM-dd HH:mm:ss'
});
layui.use(['form', 'jquery','upload'], function(){
            let form = layui.form;
            let $ = layui.$;
            let upload = layui.upload

            // 获取院系下拉菜单的动态请求列表
            $.ajax({
              url: '/userroles/getRoles', // 替换为实际接口地址
              type: 'GET',
              headers:{
              'Authorization':localStorage.getItem('token')
    },
              success: function(res) {
                console.log(res)
                if (res.code === 0) { // 根据实际接口返回状态码调整
                  var selectHtml = '';

                  // 遍历返回数据生成option
                  res.data.forEach(function(item) {
                    selectHtml += '<option value="' + item.roleId + '">' + item.roleName  + '</option>';
                  });

                  // 更新select内容
                  $('select[name="roleId"]').html(selectHtml);

                  // 重新渲染表单
                  form.render('select');
                }
              },
              error: function(xhr, status, error) {
                console.error('分类数据获取失败:', error);
              }
            });

            // 定义提交方法供父页面调用
            window.submitForm = function(callback) {
                // 表单验证
                form.verify();
                
                // 获取表单数据
                let formData = {
                    userId: $('input[name="userId"]').val(),
                    roleId:$('select[name="roleId"]').val(),
                    expireTime:$('input[name="expireTime"]').val(),
                };

                console.log(formData);
                
                // 发送AJAX请求
                $.ajax({
                    url: '/userroles/insert',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(formData),
                    headers:{
              'Authorization':localStorage.getItem('token')
    },
                    success: function(res){
                      console.log(res)
                        if(res.code === 0){
                            callback(true);
                        } else {
                            layer.msg(res.msg || '提交失败');
                            callback(false);
                        }
                    },
                    error: function(xhr){
                        layer.msg('请求失败: 该条信息已存在！' + xhr.statusText);
                        callback(false);
                    }
                });
            };


            // 暴露初始化方法供父页面调用用于编辑信息时的数据回显
            window.initFormData = function(data){
              // 填充表单数据
              form.val('layuiadmin-form-useradmin', {
                "userId": data.userId,
                "roleId": data.roleId,
                "expireTime": data.expireTime,
                
              });
              // 重新渲染表单
              form.render();
            };

        //     保存更改后的表单数据
        // 定义提交方法供父页面调用
        window.updateForm = function(callback) {
          // 表单验证
          form.verify();

          // 获取表单数据
          let formData = {
                    userId: $('input[name="userId"]').val(),
                    roleId:$('select[name="roleId"]').val(),
                    expireTime:$('input[name="expireTime"]').val(),
                };

          console.log(formData);

          // 发送AJAX请求
          $.ajax({
            url: '/userroles/update',
            method: 'PUT',
            contentType: 'application/json',
            data: JSON.stringify(formData),
            headers:{
              'Authorization':localStorage.getItem('token')
    },
            success: function(res){
              console.log(res)
              if(res.code === 0){
                callback(true);
              } else {
                layer.msg(res.msg || '更新失败');
                callback(false);
              }
            },
            error: function(xhr){
              layer.msg('请求失败: 该条信息已存在' + xhr.statusText);
              callback(false);
            }
          });
        };


        });
  </script>
</body>
</html>